<template>
  <!-- 抽屉组 -->
  <el-drawer
    :close-on-click-modal="false"
    style="border-radius: 24px; width: 280px"
    class="drawer"
  >
    <el-form>
      <el-form-item label="属性名称">
        <el-input
          placeholder="请输入属性"
          v-model="addAtrrParams.attrName"
          style="width: 80%"
        ></el-input>
      </el-form-item>
    </el-form>
    <el-button
      type="primary"
      :disabled="addAtrrParams.attrName ? false : true"
      @click="addAttr"
    >
      添加(追加)属性值
    </el-button>
    <el-button type="primary" @click="clear">清空数据</el-button>
    <el-table
      border
      max-height="320"
      style="margin-top: 20px"
      :data="addAtrrParams.attrValueList"
    >
      <el-table-column
        fixed
        label="序号"
        type="index"
        width="70px"
        align="center"
      ></el-table-column>
      <el-table-column label="属性值">
        <template #default="{ row, $index }">
          <el-input
            autofocus
            type="text"
            placeholder="请输入属性值"
            style="height: 30px; border: 0"
            v-model="row.valueName"
            v-if="row.flag2"
            @blur="toggle(row, $index)"
          ></el-input>
          <div v-else @click="toggle2(row)">
            {{ row.valueName }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="80px">
        <template #default="{ $index }">
          <el-button
            type="primary"
            icon="Delete"
            @click="addAtrrParams.attrValueList.splice($index, 1)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-button
      type="primary"
      style="margin-top: 20px"
      @click="save($parent)"
      :disabled="
        addAtrrParams.attrValueList.length != 0 &&
        addAtrrParams.attrValueList[0].valueName
          ? false
          : true
      "
    >
      保存
    </el-button>
    <el-button type="primary" style="margin-top: 20px" @click="cancel($parent)">
      取消
    </el-button>
  </el-drawer>
</template>
<script lang="ts">
export default {
  name: 'Drawer',
}
</script>

<script setup lang="ts">
import { reactive, watch } from 'vue'
import type { data, attrValueList } from '../../../../api/product/attr'
import categorizeStore from '../../../../store/modules/categorize'
import { reqAddModify } from '../../../../api/product/categorize'
import { ElMessage } from 'element-plus'
import { log } from 'console'
const props = defineProps({
  initialRow: Object,
  flag: Boolean,
})

const useCategorizeStore = categorizeStore()
//用于收集新增属性
let addAtrrParams = reactive<data>({
  attrName: '', //新增属性的名称
  categoryId: '', //新增的3级属性的id
  categoryLevel: 3, //3级属性
  attrValueList: [
    //存储新增的属性值
  ],
  id: '',
})

watch(
  () => {
    props.initialRow
  },
  () => {
    Object.assign(addAtrrParams, props.initialRow)
  },
  { deep: true, immediate: true },
)
//监听父组件的flag，如果发生变化，把抽屉组清空
watch(
  () => {
    props.flag
  },
  () => {
    Object.assign(addAtrrParams, {
      attrName: '', //新增属性的名称
      categoryId: '', //新增的3级属性的id
      categoryLevel: 3, //3级属性
      attrValueList: [
        //存储新增的属性值
      ],
      id: '',
    })
  },
  { deep: true, immediate: true },
)

function addAttr() {
  addAtrrParams.attrValueList.push({
    valueName: '',
    flag2: true,
  })
}
async function save(parent: any) {
  //检查属性是否为空，为空则不可保存
  if (!addAtrrParams.attrName) {
    ElMessage({
      type: 'warning',
      message: '请检查属性名称',
    })
    return
  }
  //点击保存前请先判断表当最后一项的内容
  for (let i = 0; i < addAtrrParams.attrValueList.length; i++) {
    if (addAtrrParams.attrValueList[i].valueName) {
      console.log(123)
    } else {
      ElMessage({
        type: 'warning',
        message: '请输入完整的表单值',
      })
      return
    }
  }

  //收集三级的id
  addAtrrParams.categoryId = useCategorizeStore.infoId3
  //发送请求
  let result = await reqAddModify(addAtrrParams)
  if (result.code == 200) {
    parent.drawer = false
    /* console.log(result) */
    ElMessage({
      type: 'success',
      message: '保存成功',
    })
  } else {
    ElMessage({
      type: 'error',
      message: '操作失败',
    })
  }
  //重新渲染属性界面
  parent.getAttr()
  //调用清空表单
  clearForm()
}
//清空数据
function clear() {
  clearForm()
}
//定义清空表单
function clearForm() {
  //格式化数据，对象合并
  Object.assign(addAtrrParams, {
    attrName: '', //新增属性的名称
    categoryId: '', //新增的3级属性的id
    categoryLevel: 3, //3级属性
    attrValueList: [
      //存储新增的属性值
    ],
  })
}

function toggle(row: attrValueList, $index: number) {
  if (!row.valueName.trim()) {
    addAtrrParams.attrValueList.splice($index, 1)
    return
  } else {
    let result = addAtrrParams.attrValueList.find((item) => {
      if (item != row) {
        return item.valueName === row.valueName
      }
    })
    if (result) {
      addAtrrParams.attrValueList.splice($index, 1)
      ElMessage({
        type: 'warning',
        message: '属性值重复,请重新填写',
      })
      return
    }
  }
  row.flag2 = false
}
function toggle2(row: attrValueList) {
  row.flag2 = true
}
function cancel(parent: any) {
  //重新渲染属性界面
  parent.getAttr()
  //抽屉关闭
  parent.drawer = false
}
</script>

<style></style>
